<template>
  <div>
    <van-nav-bar
      :title="this.$route.query.id ? '编辑地址' : '新增地址'"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="consignee">
      <ul>
        <li>
          <h5>收货人</h5>
          <input
            type="text"
            placeholder="请输入收货人姓名"
            v-model="info.consignee"
          />
        </li>
        <li>
          <h5>联系方式</h5>
          <input
            type="number"
            pattern="[0-9]*"
            placeholder="请输入收货人联系方式"
            v-model="info.phone"
          />
        </li>
        <li>
          <h5>收货地址</h5>
          <div class="ord">
            <!-- <input type="text" placeholder="           省           市            区            "  class="input" @click="address()" v-model="values"> -->
            <pre class="input" @click="address()">{{ values }}</pre>
            <br />
            <input
              type="text"
              placeholder="请输入收货人的详细地址"
              v-model="address_deta"
            />
          </div>
        </li>
      </ul>
    </div>
    <div class="ai">
      <h5>智能识别</h5>
      <textarea
        name=""
        id="Ai"
        ref="aiDom"
        cols="35"
        rows="6"
        placeholder="请粘贴详细收货信息(收货人 联系方式 收货地址)"
        @input="aiAddress()"
        @change="aiAddress($event)"
      ></textarea>
    </div>
    <div class="default-box">
      <div class="text">设为默认地址</div>
      <div
        class="default"
        @click="changeDefault"
        :style="isDefault == 1 ? { backgroundColor: '#b43e3a' } : {}"
      ></div>
    </div>

    <div class="delete" @click="deleteAddress" v-if="this.$route.query.id">
      <div>删除地址</div>
    </div>
    <div class="save" @click="save"><div>保存</div></div>

    <!-- 弹出收货人地址 -->
    <van-popup v-model="show" position="bottom" :overlay="true">
      <van-area
        :area-list="areaList"
        @confirm="ok"
        @cancel="no"
        confirm-button-text="确认"
        cancel-button-text="取消"
      />
    </van-popup>
  </div>
</template>

<script>
import { NavBar, Popup, Picker, Area, Toast, Tabbar } from "vant";
import area from "@/assets/js/area.js";
import smart from "address-smart-parse";
export default {
  data() {
    return {
      show: false,
      areaList: area,
      values: "省       市      区",
      info: {
        consignee: "", //收货人姓名
        phone: "", //收货人联系电话
        address_detail: "", //收货人详细地址
        province_code: "",
        city_code: "",
        area_code: "",
      },
      address_deta: "",
      //点击保存时拿到的字符串合并的地址
      isDefault: 0,
    };
  },
  methods: {
    changeDefault() {
      if (this.isDefault == 0) {
        this.isDefault = 1;
      } else if (this.isDefault == 1) {
        this.isDefault = 0;
      }
    },
    aiAddress() {
      // 智能解析地址
      const aiDom = this.$refs.aiDom;
      let addressValue = aiDom.value;
      // if(addressValue.indexOf("北京市")!=-1){
      //     addressValue = addressValue.replace(/北京市/g,"北京市 ")

      // }
      // /-|收货人|电话|姓名|地址|手机号码|详细地址|所在地区|：|:/g.exec()
      // console.log(/-|收货人|电话|姓名|地址|手机号码|详细地址|所在地区|：|:/g.exec(addressValue));
      addressValue = addressValue.replace(
        /-|收货人|电话|姓名|地址|手机号码|详细地址|所在地区|：\s*|:\s*|[\r\n]/g,
        ""
      );
      // console.log(addressValue);
      if (addressValue.indexOf("北京市北京市") != -1) {
        addressValue = addressValue.replace(/北京市北京市/gm, "北京");
      }
      if (addressValue.indexOf("北京市朝阳") != -1) {
        addressValue = addressValue.replace(/北京市朝阳/g, "北京朝阳");
      } else if (addressValue.indexOf("天津市") != -1) {
        addressValue = addressValue.replace(/天津市/g, "天津市 ");
      } else if (addressValue.indexOf("重庆市") != -1) {
        addressValue = addressValue.replace(/重庆市/g, "重庆市 ");
      }
      // console.log(smart(addressValue));
      // parseArea(areaList);
      // console.log(parse(addressValue));
      // console.log(/\d{11}/g.exec(addressValue)[0]);
      // console.log(/\d{11}/g.exec(addressValue));

      let Aiphone = /\d{11}/g.exec(addressValue);
      if (Aiphone != null) {
        addressValue = addressValue.replace(Aiphone[0], `  ${Aiphone[0]}  `);
      }

      console.log(addressValue);
      let obj = smart(addressValue);
      console.log(obj);
      for (const key in obj) {
        if (obj[key] == undefined) {
          obj[key] = "";
        }
      }
      let {
        name,
        phone,
        province,
        city,
        county,
        address,
        street,
        provinceCode,
        countyCode,
        cityCode,
      } = obj;
      // console.log(obj);
      // if(provinceCode&&countyCode&&cityCode&&address&&county&&city&&province&&phone&&name){
      if (phone) {
        // console.log(countyCode.length);
        this.info.consignee = name;
        this.info.phone = phone;
        while (
           provinceCode&&provinceCode.length < 6 ||
          cityCode&&cityCode.length < 6 ||
          countyCode&&countyCode.length < 6
        ) {
          //判断代码长度是否是6位,如果不足在后面补0
          if (provinceCode.length < 6) {
            provinceCode += "0";
          }
          if (cityCode.length < 6) {
            cityCode += "0";
          }
          if (countyCode.length < 6) {
            countyCode += "0";
          }
        }

        this.info.province_code = provinceCode;
        this.info.city_code = cityCode;
        this.info.area_code = countyCode;
        province != undefined
          ? (this.values = `${province}  ${city}  ${county}`)
          : (this.values = "省       市      区");
        street? this.address_deta =street+address:this.address_deta =address;
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    address() {
      this.show = true;
      // ev.preventDefault()
    },
    ok(values) {
      // console.log(1)
      this.show = false;
      var list = "";
      this.address_value = values;
      values.forEach((item) => {
        list += item.name + " ";
      });
      this.info.province_code = values[0].code;
      this.info.city_code = values[1].code;
      this.info.area_code = values[2].code;
      this.values = list;
    },
    no() {
      // console.log(2)
      this.show = false;
    },

    save() {
      if (!this.info.consignee) {
        Toast("收货人姓名不能为空");
        return;
      }
      if (!this.info.phone) {
        Toast("收货人电话不能为空");
        return;
      } else {
        var pattern = /^0{0,1}(1[0-9][0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
          str = this.info.phone;
        if (!pattern.test(str)) {
          Toast("请输入正确的手机号码");
          return;
        }
      }
      if (!this.info.province_code) {
        Toast("收货省份不能为空");
        return;
      }
      if (this.info.city_code < 1) {
        Toast("收货城市不能为空");
        return;
      }
      if (this.info.area_code < 1) {
        Toast("收货地区不能为空不能为空");
        return;
      }
      if (!this.address_deta) {
        Toast("详细地址不能为空");
        return;
      }

      this.info.address_detail = (this.values + this.address_deta).replace(
        /\s*/g,
        ""
      );
      //  console.log(this.info.address_detail,"地址详细信息");

      //新增地址
      if (!this.$route.query.id) {
        this.apiPost("user/add_address", {
          token: localStorage.getItem("token"),
          name: this.info.consignee,
          tel: this.info.phone,
          address: this.info.address_detail,
          province_code: this.info.province_code,
          city_code: this.info.city_code,
          area_code: this.info.area_code,
          detail_addr: this.address_deta,
          isDefault: this.isDefault,
        }).then((res) => {
          if (res.data.code == 200) {
            Toast({
              message: res.data.message,
              forbidClick: true,
              duration: 500,
            });
            setTimeout(() => {
              this.$router.go(-1);
            }, 501);
          } else {
            Toast(res.data.message);
          }
        });
      } else {
        //编辑地址
        this.apiPost("user/edit_address", {
          token: localStorage.getItem("token"),
          id: this.$route.query.id,
          name: this.info.consignee,
          tel: this.info.phone,
          address: this.info.address_detail,
          province_code: this.info.province_code,
          city_code: this.info.city_code,
          area_code: this.info.area_code,
          detail_addr: this.address_deta,
          isDefault: this.isDefault,
        }).then((res) => {
          if (res.data.code == 200) {
            Toast(res.data.message);
            this.$router.go(-1);
          } else {
            Toast(res.data.message);
          }
        });
      }
    },
    deleteAddress() {
      this.apiPost("user/delete_address", {
        token: localStorage.getItem("token"),
        id: this.$route.query.id,
      }).then((res) => {
        if (res.data.code == 200) {
          Toast(res.data.message);
          this.$router.go(-1);
        } else {
          Toast(res.data.message);
        }
      });
    },
  },
  created() {},
  mounted() {
    let { address, tel, id, name } = this.$route.query;
    if (address && tel && id && name) {
      // if(address.indexOf("北京市")!=-1){
      //     address = address.replace(/北京市/g,"北京市 ")

      // }
      // else if(address.indexOf("上海市")!=-1){
      //     address = address.replace(/上海市/g,"上海市 ")
      // }
      // else if(address.indexOf("天津市")!=-1){
      //     address = address.replace(/天津市/g,"天津市 ")
      // }
      // else if(address.indexOf("重庆市")!=-1){
      //     address = address.replace(/重庆市/g,"重庆市 ")
      // }
      let Ai = document.querySelector("#Ai");
      Ai.value = `${address}  ${name}  ${tel}`;
      this.aiAddress();
    }
  },
};
</script>

<style scoped>
.ai {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  background-color: #fff;
  border-bottom: 0.267vw solid #f4f4f4;
  font-size: 1.2;
  padding: 1em 1.5em;
}
.ai h5 {
  flex: 1;
  flex-shrink: 0;
  min-width: 54px;
  text-align: left;
}
textarea {
  flex: 4;
  resize: none;
  border: none;
  outline: none;
  vertical-align: middle;
  border-style: none;
}
textarea::placeholder {
  font-size: 0.9em;
}
.consignee ul li {
  display: flex;
  width: calc(100vw - 3em);
  padding: 1em 1.5em;
  background-color: #fff;
  border-bottom: 0.267vw solid #f4f4f4;
}
.consignee ul li h5 {
  flex: 1;
  min-width: 54px;
  text-align: left;
  display: flex;
  flex-shrink: 0;
  font-size: 1.2;
  /* justify-content: center;
     */
  align-items: center;
}
.consignee ul li input {
  flex: 4;
  width: 100%;
  vertical-align: middle;
  border-style: none;
  border-bottom: 0.267vw solid #f4f4f4;
  font-size: 0.9em;
}
.consignee ul li .ord {
  flex: 4;
  /* width: 100%; */
  overflow: hidden;
}
.consignee ul li .ord h5 {
  flex: 1;
  text-align: left;
  display: flex;
  font-size: 1.2;
  flex-basis: top;
}
.consignee ul li .ord input {
  width: 100%;
  padding: 0.5em 0;
}

.input {
  text-overflow: ellipsis;
  white-space: nowrap;
  background: url("../../assets/i/01/arr.png") no-repeat right/7%;
  border-bottom: 0.267vw solid #f4f4f4;
  /* height: ;     */
  text-align: left;
  color: #666;
  font-size: 0.9em;
  flex: 4;
}
button {
  border-style: none;
  background-color: #b43e3a;
  color: white;
  width: 80%;
  border-radius: 2em;
  padding: 0.5em;
  margin: 2em 0;
}
.default-box {
  display: flex;
  justify-content: space-between;
  padding-right: 5.333vw;
  padding-left: 5.333vw;
  background-color: #fff;
  align-items: center;
}
.default-box .text {
  line-height: 4vw;
}
.default {
  margin-top: 0.8vw;
  margin-left: 2.667vw;
  width: 4vw;
  height: 4vw;
  line-height: 4vw;
  border-radius: 2.667vw;
  border: 0.267vw solid #b43e3a;
}
.save {
  width: 80vw;
  height: 10vw;
  border-radius: 5vw;
  line-height: 10vw;
  text-align: center;
  color: #fff;
  background-color: #b43e3a;
  margin: 8vw auto 0 auto;
}
.delete {
  width: 80vw;
  height: 10vw;
  border-radius: 5vw;
  line-height: 10vw;
  text-align: center;
  color: #fff;
  background-color: #b43e3a;
  margin: 8vw auto 0 auto;
}
</style>